<template>
    <view>
        <public-module></public-module>
        <wlk-navbar  navbarType='5'></wlk-navbar>
        <view class="relative" v-if="!loading">
            <u-swiper
                    :list="item.images"
                    keyName="image"
                    circular
                    indicator
                    indicatorMode="dot"
                    :indicatorStyle="indicatorStyle"
                    height="270"
            ></u-swiper>
            <view class="detail wd100 pd30">
                <view class="name">{{item.name}}</view>
                <view class="desc mt10">营业时间：{{item.workrange?item.workrange:''}}</view>
                <view class="wlkflex mt10">
                    <view class="tag br04 mr10" :style="{color:themeColor}" v-for="(tag,k) in item.tags">{{tag}}</view>
                </view>
                <u-divider></u-divider>
                <view class="relative">
                    <image mode="widthFix"  src="/static/images/merch/mapBg.png" class="wd100 mapBg"></image>
                    <view class="map-box wlkflex justify-between">
                        <view class="left">
                            <view class="wlkflex wd100 address">
                                <image mode="widthFix"  src="/static/images/index/map.png" style="width: 25rpx;"></image>
                                <text class="info ml10">{{item.address}}</text>
                            </view>
                            <view class="mt05 distance">
                                距离您 <text class="ml05 mr05">{{item.distance}}</text> km
                            </view>
                        </view>
                        <view class="right wlkflex justify-end">
                            <view class="btn-map wlkflex justify-center" @click="toMap(item.lat,item.lng,item.name,item.name)">
                                <uni-icons type="paperplane-filled" :color="themeColor" size="25"></uni-icons>
                            </view>
                        </view>
                    </view>
                </view>
                <u-divider></u-divider>
                <view class="wlkflex mt30">
                    <view class="tip" :style="{backgroundColor: themeColor}"></view>
                    <view class="title bold">商家介绍</view>
                </view>
                <view class="mt10">
                    <block v-if="!$u.test.isEmpty(item.content)">
                        <u-parse :content="item.content" :selectable="true"></u-parse>
                    </block>
                    <block v-else>
                        <u-empty
                                icon="http://cdn.uviewui.com/uview/empty/data.png"
                                text="暂无介绍"
                        >
                        </u-empty>
                    </block>
                </view>
            </view>
        </view>
        <view class="wlkflex fixed wd100 justify-between">
            <view class="btn-left wlkflex justify-center" @click="call(item.tel)">
                <uni-icons type="phone-filled" size="28"></uni-icons>
            </view>
            <view class="btn-right wlkflex justify-center" @click="openWork">
                <uni-icons type="chat-filled" :color="themeColor" size="28"></uni-icons>
                <view class="ml10" :style="{color:themeColor}">企微客服</view>
            </view>
        </view>
	</view>
</template>

<script>
    var _self;
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    import { openMap,makePhoneCall,toUrl,toWork,formatRichText } from '@/wlkutils/tools';
    export default {
		data() {
			return {

                item:[],
                id:0,
                indicatorStyle:{
                    left:'30rpx',
                    bottom:'50rpx'
                },
                loading:true
			};
		},
        computed:{
            ...mapState(['lat','lng','location','themeColor','uEmpty'])
        },
        onLoad(e) {
		    this.id = e.id;
            _self=this;
        },
        onShow(){
            this.getData();
        },
        methods: {
            toMap(lat,lng,name, address){
                openMap(lat,lng,name, address);
            },
            call(tel){
                makePhoneCall(tel);
            },
            openWork(){
                toWork(this.item.kf_url,this.item.corp_id);
            },
            getData(){
                uni.$u.http.post('merch/getDetail', {
                    lat:_self.lat,
                    lng:_self.lng,
                    id:_self.id
                }).then(res => {
                    _self.item = res.data.item;
                    if (!uni.$u.test.isEmpty(_self.item.content)) {
                        _self.item.content = formatRichText(_self.item.content);
                    }
                    _self.loading = false;
                }).catch(res => {
                    _self.loading = false;
                })
            },

        }

	}
</script>

<style lang="scss">
    page{
        background-color: #FFFFFF!important;
        .detail{
            position: absolute;
            border-radius: 30rpx 30rpx 0 0;
            margin-top: -30rpx;
            z-index: 998;
            background-color: #FFFFFF;
            padding-bottom: 200rpx;
            .name{
                font-size: $font-lg;
                font-weight: bold;
            }
            .desc{
                color: $uni-text-color-grey;
                font-size: $font-sm;
            }
            .tag{
                background-color: $-wash-wait-color;
                padding: 5rpx 10rpx;
                font-size: $font-sm;
            }
            .mapBg{
                position: absolute;
                top: 0;
            }
            .map-box{
                height: 180rpx;
                .left{
                    width: 80%;
                    .address{
                        .info{
                            width: 80%;
                            font-size: $font-sm;
                        }
                    }
                    .distance{
                        color: $uni-text-color-grey;
                        font-size: $font-sm;
                        margin-left: 34rpx;
                    }
                }
                .right{
                    width: 20%;
                    text-align: right;
                    .btn-map{
                        width: 70rpx;
                        height: 70rpx;
                        border-radius: 50%;
                        background-color: $-wash-wait-color;
                    }
                }

            }
            .tip{
                width: 8rpx;
                height: 28rpx;
                margin-right: 20rpx;
                border-radius: 10px;
            }
            .title{
                font-size: $font-lt;
            }
        }
        .fixed{
            position: fixed;
            bottom: 80rpx;
            z-index: 999;
            padding: 0 30rpx;
            .btn-left{
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                background-color: #f5f6f7;
            }
            .btn-right{
                width: 80%;
                height: 100rpx;
                background-color: $-wash-wait-color;
                border-radius: 60rpx;
            }
        }
    }



</style>
